<template>
  <div>
    <div>
      <van-search placeholder="请输入搜索关键词" />
    </div>
    <div class="wrapper-container">
      <div class="wrapper-left">
        <div>
          <goodsclassify 
          v-for="(item,index) in oneList" 
          :key="index" 
          :arr="item"
          :index="index" 
          :selectIndex="selectIndex"
          @changeIndex="changeIndex"
          />
        </div>
      </div>
      <div class="wrapper-right">
        <div class="right-box">
          <div
          v-for="(item,index) in subClaaify"
          :key="index"
          class="right-item"
          >
          <div>
            <img :src="item.icon" alt="">
          </div>
          <div>{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import goodsclassify from "../components/goodsclassify";
export default {
  components: {
    goodsclassify,
  },
  data() {
    return {
      all:[],
      oneList: [],
      subClaaify:[],
      selectIndex:0
    };
  },
  mounted() {
    this.$netClient.classifyList().then((res) => {
      // console.log('分类数据',res.data.data)
      this.all = res.data.data
      let oneTitle = res.data.data;
      this.oneList.push({
        name: "全部商品",
        pid:0
      });
      oneTitle.forEach((i) => {
        if (i.pid === 0) {
          this.oneList.push(i);
          console.log(this.oneList);
        }
        if(i.pid !== 0){
          this.subClaaify.push(i)
        }
      });
    });
  },
  methods:{
    changeIndex(index){
      this.selectIndex = index
      if(this.selectIndex === 0){
        console.log(111)
      }
      this.subClaaify=[]
      var cid = this.oneList[this.selectIndex].id;
      this.all.forEach((i)=>{
        if(i.pid === cid){
          this.subClaaify.push(i)
        }
      })
    }
  }
};
</script>

<style scoped>
.wrapper-container {
  width: 100%;
  height: 82vh;
  /* background: aqua; */
  display: flex;
}
.wrapper-left {
  width: 25%;
  height: 100%;
  border: 1px solid red;
}
.wrapper-right {
  width: 75%;
  height: 100%;
  border: 1px solid red;
  overflow: scroll;
}
.right-box{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.right-item{
  width: 100px;
}
.right-item img{
  width: 100px;
}
</style>